//改变遍历过的节点背景颜色
function selNode(element) {
    element.style.backgroundColor = "#ccc";
}
//清除遍历标记
function delNode(element) {
    element.style.backgroundColor = "";
}

function allClear(thisNode) {
    delNode(thisNode);
    if (thisNode.children[0]) {
        allClear(thisNode.children[0]);
        allClear(thisNode.children[1]);
    }
}
//click调用函数
function clear() {
    var node = document.getElementById("parent");
    allClear(node);
}
function clear() {
    var node = document.getElementById("parent");
    arr = new Array();
    var nodeLastVisit = null;
    while (node) {
        arr.push(node);
        node = node.children[0];
    }
    while (arr[0]) {
        node = arr.pop();
        var j = node.children.length-1;
        if (node.children[j] == null || node.children[j] == nodeLastVisit) { //无右节点或所有右节点均已经遍历时，遍历根节点
            delNode(node);
            nodeLastVisit = node;
        } else {
            arr.push(node);                                                  //有右节点且右节点未遍历，遍历右枝
            var i = 0;
            while( node.children[i]!=nodeLastVisit){
                i++;
            }
            node = node.children[i+1];
            while (node) {
                arr.push(node);
                node = node.children[0];
            }
        }
    }
}
//为按钮注册click事件监听器
window.onload = function () {
    document.getElementById("qian").addEventListener("click", qian);
    document.getElementById("zhong").onclick = zhong;
    document.getElementById("hou").onclick = hou;
    document.getElementById("clear").onclick = clear;
}

//前序遍历
function qian(thisNode) {
    var node = document.getElementById("parent");
    arr = new Array();
    var i = 0;
    var time1 = setInterval(function () {
            selNode(node); //遍历根节点
            if (node.children[0]) { //存储有右节点的根节点
                if (node.children[1]) {
                    arr.push = node;
                    i++;
                }
                node = node.children[0];
            } else if (node.children[1]) {
                node = node.children[1];
            } else if (arr[0]) {
                node = arr[i - 1].children[1];
                arr.pop();
                i--;
            } else {
                clearInterval(time1);
            }
        }, 1000);
}

//中序遍历
function zhong() {
    var node = document.getElementById("parent");
    arr = new Array();
    var time1 = setInterval(function () {
            while (node) {
                arr.push(node);       //存储根节点
                node = node.children[0];
            }
            if (arr[0]) {             //无左节点时，遍历根节点
                node = arr.pop();
                selNode(node);
                node = node.children[1]; //经while循环后，若根节点有右节点，右节点入栈
            } else {
                clearInterval(time1);
            }
        }, 1000);
}
//后续遍历
function hou() {
    var node = document.getElementById("parent");
    arr = new Array();
    var nodeLastVisit = null;
    while (node) {
        arr.push(node);
        node = node.children[0];
    }
    var time1 = setInterval(function () {
            if (arr[0]) {
                node = arr.pop();
                var j = node.children.length-1;
                if (node.children[j] == null || node.children[j] == nodeLastVisit) { //无右节点或所有右节点均已经遍历时，遍历根节点
                    selNode(node);
                    nodeLastVisit = node;
                } else {
                    arr.push(node);                                                  //有右节点且右节点未遍历，遍历右枝
                    var i = 0;
                    while( node.children[i]!=nodeLastVisit){
                        i++;
                    }
                    node = node.children[i+1];
                    while (node) {
                        arr.push(node);
                        node = node.children[0];
                    }
                }
            } else {
                clearInterval(time1);
            }
        }, 500);
}
